<template>
	<view class="guide-page">
		<swiper :indicator-dots="true" :style="{ height: screenHeight + 'px' }" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in posterList" :key="index">
				<view class="swiper-item">
					<image :src="item" :style="{ height: screenHeight + 'px' }" mode=""></image>
					<view class="skip-flag" @tap="skipForPosterPage">{{ skipText }} {{time}}</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import api from '@/common/lib/request.js';

export default {
	data() {
		return {
			time: 5,
      timerId: null,
			screenHeight: 500,
			skipText: '跳过',
			posterList: [
			]
		};
	},
	watch: {
		// time(newVal, oldVal) {
		// 	if (newVal == 0) {
		// 		this.skipForPosterPage();
		// 	}
		// }
	},
	onLoad() {
		const infos = uni.getSystemInfoSync();
		this.screenHeight = infos.screenHeight;
		this.getGuidePics()
		this.setAutoJumpTimer()
	},
	methods: {
		getGuidePics(){
			let _this = this;
			api.request({
					url: '/start-advertisement',
					data: {}
				})
				.then(response => {
					if(response.length > 0){
						_this.posterList = response;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 设置自动跳转计时器
		setAutoJumpTimer(){
			const _this = this;
			this.timerId = setInterval(function() {
				if (_this.time > 0) {
					_this.time = _this.time - 1;
				} else {
					_this.skipForPosterPage();
				}
			}, 1000);
		},
		skipForPosterPage() {
      clearInterval(this.timerId);
			uni.setStorage({
				key: 'launchFlag',
				data: false
			});
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style scoped>
.guide-page {
	width: 100%;
	height: 100%;
}
.swiper-item {
	position: relative;
}
.swiper-item .skip-flag {
	position: absolute;
	bottom: 80upx;
	right: 30upx;
	border-radius: 8upx;
	border: 1px solid #46AAD1;
	color: #46AAD1;
	padding: 0upx 10upx;
	font-size: 14px;
	line-height: 22px;
}
</style>
